<template>
  <div class="table-container">
    <Table :loading="loading" :columns="columns" :data="list">
      <template slot-scope="{ row }" slot="name">
        <router-link v-if="noId" :to="{ name: 'that_front_overview', params: { id: row.id } }">{{ row.name }}</router-link>
        <router-link v-else :to="{ name: 'stationOverview', params: { id: row.id } }">{{ row.name }}</router-link>
      </template>
    </Table>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { assign } from 'lodash'
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers('agent')
export default {
  name: 'startpage-table',
  data () {
    return {
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('3XCbmVH_U3ZYTtc5eh9SZ'),
          key: 'name',
          width: 150,
          slot: 'name'
          // render: function (h, pms) {
          //   console.log('=======================', this)
          //   const { params } = this.$route
          //   let to = {}
          //   if (_.isNil(params.id)) {
          //     to = {
          //       name: 'that_front_overview',
          //       params: {
          //         id: pms.row.id
          //       }
          //     }
          //   } else {
          //     to = {
          //       name: 'stationOverview',
          //       params: {
          //         id: pms.row.id
          //       }
          //     }
          //   }
          //   return h('router-link', {
          //     props: {
          //       to
          //     }
          //   }, pms.row.name)
          // }
        },
        {
          title: this.$t('nEQtz7kKVBcFDpDn0iiYf'),
          key: 'scale'
        },
        {
          title: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
          key: 'ToDayElectric'
        },
        {
          title: this.$t('6LCOzdrU5sddtGNODX6zu'),
          key: 'AppToDayElectric'
        },
        {
          title: this.$t('MV-P1vHjPXG7_m9z2N7Zk'),
          key: 'Agent_PileCount'
        },
        {
          title: this.$t('APrvYpi7foB2h62_5DP0q'),
          key: 'onlineTotal'
        },
        {
          title: this.$t('LdhLANFGmrEcJf8T58SHZ'),
          key: 'ChargingTotal'
        },
        {
          title: this.$t('L2UZuJOPtG2otWb2Y2aQF'),
          key: 'faultTotal'
        },
        {
          title: this.$t('jrkZ2Urg4M1yD_4FI3wuo'),
          key: 'UpdateTime'
        }
      ]
    }
  },
  computed: {
    ...mapState(['allAgents', 'allStations']),
    noId () {
      return _.isNil(this.$route.params.id)
    },
    list () {
      const { params } = this.$route
      if (params.id) {
        return this.allStations.map(agent => {
          return assign({}, agent, {
            ToDayElectric: 0,
            AppToDayElectric: 0,
            Agent_PileCount: 0,
            onlineTotal: 0,
            ChargingTotal: 0,
            faultTotal: 0,
            UpdateTime: '-'
          })
        })
      } else {
        return this.allAgents.map(agent => {
          return assign({}, agent, {
            ToDayElectric: 0,
            AppToDayElectric: 0,
            Agent_PileCount: 0,
            onlineTotal: 0,
            ChargingTotal: 0,
            faultTotal: 0,
            UpdateTime: '-'
          })
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.table-container
  margin 10px
  margin-top 20px
</style>
